<template>
  <div style="position: fixed; bottom: 0; z-index: 888;">
    <van-tabbar v-model="active" route v-if="!$route.meta.isHidden">
      <van-tabbar-item to="/home" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/category" icon="shop-o">分类</van-tabbar-item>
      <van-tabbar-item to="/shop" icon="goods-collect-o">值得买</van-tabbar-item>
      <van-tabbar-item to="/cart" icon="cart-o">
        <van-badge style="position: absolute; right: 92px; top: 8px" /> 购物车
      </van-tabbar-item>
      <van-tabbar-item to="/user" icon="user-o">个人</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
    
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'TabbarServe'
});
</script>
    
<script lang="ts" setup>
import { ref } from 'vue';
const active = ref(0);
// const cartListStore = useCartListStore()
// let { cartList } = storeToRefs(cartListStore)
</script>
    
<style lang="less" scoped>
.van-tabbar-item--active {
  color: red;
}
</style>
    
